// 引入变量和全局样式
@use "var.scss" as *;
@use "global.scss" as *;
.container {
    padding: 0 0.65rem;
    box-sizing: border-box;
    overflow: auto;
    width: 100%;
    .comment {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 0.65rem 0;
        border-bottom: 0.06rem solid $border-fourth;
        .info {
            display: flex;
            align-items: center;
            .avatar {
                border-radius: 50%;
            }
            .right {
                display: flex;
                flex-direction: column;
                margin-left: 0.65rem;
                .name {
                    font-size: 1rem;
                    color: $text-main;
                    margin-bottom: 0.32rem;
                    font-weight: 500;
                }
                .date {
                    font-size: 0.75rem;
                    color: $text-minor;
                }
            }
        }
        .content {
            font-size: 1rem;
            color: $text-main;
            line-height: 1.25rem;
            padding: 0.75rem 0;
        }
        .control {
            display: flex;
            align-items: center;
            font-size: 0.88rem;
            color: $text-minor;
            .like {
                display: flex;
                align-items: center;
                margin-right: 1.25rem;
                cursor: pointer;
                &.active,
                &:hover {
                    color: $color-main;
                }
                .iconfont {
                    font-size: 0.88rem;
                    margin-right: 0.35rem;
                }
            }
            .comment-reply {
                display: flex;
                align-items: center;
                cursor: pointer;
                &:hover {
                    color: $text-333;
                }
                .iconfont {
                    font-size: 1rem;
                    margin-right: 0.35rem;
                }
            }
        }
        .reply {
            margin: 0.65rem 0;
            border-left: 0.2rem solid $border-first;
            .item {
                margin: 0 0.65rem;
                padding: 0.65rem 0;
                border-bottom: 0.06rem dashed $border-third;
                .reply-content {
                    display: flex;
                    align-items: center;
                    font-size: 0.88rem;
                    color: $text-main;
                    .from-name {
                        color: $color-main;
                    }
                    .to-name {
                        color: $color-main;
                        margin-left: 0.35rem;
                        margin-right: 0.35rem;
                    }
                }
                .reply-bottom {
                    display: flex;
                    align-items: center;
                    margin-top: 0.4rem;
                    font-size: 0.75rem;
                    color: $text-minor;
                    .reply-text {
                        display: flex;
                        align-items: center;
                        margin-left: 0.65rem;
                        cursor: pointer;
                        &:hover {
                            color: $text-333;
                        }
                        .icon-comment {
                            margin-right: 0.35rem;
                        }
                    }
                }
            }
            .write-reply {
                display: flex;
                align-items: center;
                font-size: 0.88rem;
                color: $text-minor;
                padding: 0.65rem;
                cursor: pointer;
                &:hover {
                    color: $text-main;
                }
                .el-icon-edit {
                    margin-right: 0.35rem;
                }
            }
            .fade-enter-active,
            fade-leave-active {
                transition: opacity 0.5s;
            }
            .fade-enter,
            .fade-leave-to {
                opacity: 0;
            }
            .input-wrapper {
                padding: 0.65rem;
                .gray-bg-input,
                .el-input__inner {
                    /*background-color: #67C23A;*/
                }
                .btn-control {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    padding-top: 0.65rem;
                    .cancel {
                        font-size: 1rem;
                        color: $text-normal;
                        margin-right: 1.25rem;
                        cursor: pointer;
                        &:hover {
                            color: $text-333;
                        }
                    }
                    .confirm {
                        font-size: 1rem;
                    }
                }
            }
        }
    }
}

// 展开按钮
.expand-button {
    padding-left: 0.5rem;
    color: rgb(78, 195, 241);
}

.night-mode {
    .container {
        .comment {
            .info {
                .right {
                    .name {
                        color: #ffffff;
                    }
                }
            }
            .content {
                color: #ffffff;
            }
        }
    }
}
